<template>
  <header class="app-header navbar">
    <button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">&#9776;</button>
    <b-link class="navbar-brand" to="#" @click="toSystem()">TAKIGEN CRM管理系统</b-link>
    <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarMinimize">&#9776;</button>
    <b-nav is-nav-bar class="ml-auto logo-box">
      <b-nav-item-dropdown right>
        <template slot="button-content">
          <!--<img src="../assets/user-logo.png" class="img-avatar" alt="admin@bootstrapmaster.com">-->
          <span class="d-md-down-none">{{ username }}</span>
        </template>
        <b-dropdown-header tag="div" class="text-center"><strong>账户</strong></b-dropdown-header>
        <b-dropdown-item @click="Logout()"><i class="fa fa-lock"></i> 退出</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-nav>
    <!--<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">&#9776;</button>-->
  </header>
</template>
<script>
  export default {
    name: 'header',
    data () {
      return {
        username: 'admin'
      }
    },
    methods: {
      sidebarToggle (e) {
        e.preventDefault()
        document.body.classList.toggle('sidebar-hidden')
      },
      sidebarMinimize (e) {
        e.preventDefault()
        document.body.classList.toggle('sidebar-minimized')
      },
      mobileSidebarToggle (e) {
        e.preventDefault()
        document.body.classList.toggle('sidebar-mobile-show')
      },
      asideToggle (e) {
        e.preventDefault()
        document.body.classList.toggle('aside-menu-hidden')
      },
      toSystem () {
        this.$router.push({
          path: '/homepage'
        })
      },
      Logout () {
        this.$router.push({
          path: '/'
        })
      }
    },
    created () {
      this.username = localStorage.getItem('username')
    }
  }
</script>
<style>
  .app-header.navbar .dropdown-item {
    min-width: 90px!important;
  }
  .app-header.navbar .navbar-brand {
    display: inline-block;
    width: auto;
    height:auto;
    border:none;
    font-size: 1.25rem;
    padding: .5rem 1rem;
    margin-right: 0;
    background:none;
  }
  .logo-box {
    margin-right: 10px;
  }
</style>
